<template>
	<view class="times">
		<time-header :avatars="avatars" :moment-count="3"></time-header>
		<view class="times-content">
			<scroll-view scroll-y="true" enable-back-to-top="true" show-scrollbar="false" @scrolltolower="fetchRecords">
				<timeline-item v-for="(record, index) in records" :key="index" :record="record"></timeline-item>
			</scroll-view>
		</view>
		<view class="time-bottom">
			<uni-load-more :status="loadmore" @clickLoadMore="fetchRecords"></uni-load-more>
		</view>
		<uni-fab ref="fab" :pattern="patten" horizontal="right" vertical="bottom" direction="vertical"
			@fabClick="addRecord" />
	</view>
</template>

<script>
	import {
		ref,
		reactive
	} from "vue";
	import TimeHeader from "./components/TimeHeader";
	import TimelineItem from "./components/TimelineItem";
	export default {
		name: 'TimeMachine',

		components: {
			TimeHeader,
			TimelineItem
		},
		setup() {
			const loadmore = ref('more')
			const patten = reactive({
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#fc3f3f',
				buttonColor: 'rgba(222, 70, 89, 1)',
				iconColor: '#fff'
			})
			const avatars = reactive([
				'https://img.72qq.com/file/202112/10/4a2302f528.jpg',
				'https://img.72qq.com/file/202112/14/6de3dfc39a.jpg'
			])
			const records = reactive([{
				month: 8,
				day: 17,
				text: '你好啊，我是你腊排骨',
				location: '玉兰香苑1期组团B',
				images: [
					'https://img1.baidu.com/it/u=3136492645,2017446389&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1660928400&t=557e57ed27248801a755a9a90df03a58',
					'https://img1.baidu.com/it/u=608404415,1639465523&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1660928400&t=e36dcc37798d1df2cf5b60e4e4eab39f',
					'https://img1.baidu.com/it/u=608404415,1639465523&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1660928400&t=e36dcc37798d1df2cf5b60e4e4eab39f',
					'https://img1.baidu.com/it/u=608404415,1639465523&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1660928400&t=e36dcc37798d1df2cf5b60e4e4eab39f'
				]
			}, {
				month: 4,
				day: 1,
				text: '你好啊，爱爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟爱你哟你哟',
				location: '',
				images: [
					'https://img0.baidu.com/it/u=1275095085,1961143463&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1660928400&t=6d131d52b65d99dc50a55556fa5b6dbf',
				]
			}])
			const addRecord = () => {
				console.log(1111)
				loadmore.value = 'more'
			}
			const fetchRecords = () => {
				loadmore.value = 'loading'
				console.log('开始加载')
				// loadmore.value = 'more'
			}
			return {
				loadmore,
				patten,
				avatars,
				records,
				addRecord,
				fetchRecords
			}
		},
		onReachBottom() {
			this.fetchRecords()
		}
	}
</script>

<style lang="scss" scoped>
	.times-content {
		box-sizing: border-box;
		padding: 90rpx 0 0;
	}

	.time-bottom {
		height: 80rpx;
		padding: 10rpx 0;
		margin: 0 auto;
	}
</style>
